<template>
    <div class="share">
      <div class="share_bj">
        <div class="share_con">
          <div class="eco_four bgfff">
            <section class="khfxPane">
              <van-pull-refresh v-model="isLoading">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  :finished-text="text"
                  @load="onLoad"
                  :offset="100"
                  :immediate-check="false"
                >
                <ul id="goods-list" class="goods_list" v-if="commodity.list && commodity.list.length>0" >
                  <li v-for="(val, key) in commodity.list" @click="shopLink(val)">
                    <div class="good_img">
                      <img :src="val.product_image_url"/></div>
                    <div class="title"><p>{{val.name}}</p></div>
                    <div class="pce_sum">
                      <p class="price"><span>￥</span>{{val.price}} </p>
                      <p class="price1"><span>销售总数：</span>{{val.sales_volume}} </p>
                    </div>
                  </li>
                </ul>
                </van-list>
              </van-pull-refresh>
            </section>
          </div>
          <!--回到顶部-->
          <goTop></goTop>
        </div>
      </div>
    </div>
</template>

<script>
  import { Loadmore } from 'mint-ui'
  import goTop from '@/pages/foot/goTop'
    export default {
        name: "share",
      data() {
        return {
          commodity: [], // 上拉更多的数据存放数组
          commodityList:[],
          //下拉刷新
          isLoading: false,
          //上拉加载
          loading: false,
          finished: false,
          pageNum: 1,
          text:'',
        }
      },
      components: {
        'v-loadmore':Loadmore,goTop
      },
      created:function () {
        setTitle('分享商品')
      },
      methods: {
        //跳转商品详情页
        shopLink(val) {
          this.$router.push({name: '商品详情', query: {id: val.id,type:'2'}})
        },
        async getCommodityShop () {
          let params = {
            pageSize:10,
            pageNum:this.pageNum,
          };
          const res = await this.$axios.post(this.$api.chsoleYMGoods, params);
          if (res.success) {
            if (this.loading) {
              this.commodityList = this.commodityList.concat(res.data.list);
              this.commodity = res.data;
              this.commodity.list = this.commodityList;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
              } else {
                this.pageNum++;
              }
            } else {
              this.commodity = res.data;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
                this.text='没有更多了'
              }
            }
            this.isLoading = false;
            this.loading = false;
          } else {
            this.$toast(res.msg);
          }
        },
        onLoad(){
          // 上拉加载
          if (this.commodity.list && this.commodity.list.length > 0) {
              this.getCommodityShop()
          }
        },
      },
      mounted() {
        this.getCommodityShop();  //初次访问查询列表
      }
    }
</script>

<style scoped>
  .share{
    width: 100%;
    min-height:6rem;
    background-color: #8129df;
  }
  .share_bj{
    width: 100%;
    background: url(https://image.soole.com.cn/fxbjt.png) no-repeat;
    background-size: 100%;
  }
  .share_con {
    overflow: hidden;
    position: relative;
    top: 6rem;
    left: 0;
    background-color: #8129df;
  }
  .eco_four {
    z-index: 1
  }
  .khfxPane ul {
    padding-top: 0.1rem;
    overflow: hidden;
    z-index: 1
  }
  .khfxPane ul li {
    float: left;
    width: 47%;
    margin: 0 0 0.1rem 2%;
    text-align: center;
    list-style-type: none;
    background-color: #fff;
    border-radius: 0.05rem;
  }
  .good_img {
    text-align: center;
    width: 100%;
    overflow: hidden;
  }
  .khfxPane ul li .good_img img {
    height: 1.5rem;
    width: 100%;
    object-fit: cover;
    border-radius: 0.05rem;
  }
  .goods_list li .title {
    width: 95%;
    margin: 0.05rem auto 0;
    height: 0.38rem;
    font-size: 0.14rem;
    text-align: left;
    /*line-height: 1.2;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .goods_list li .title p{
    color: #000;

  }
  .pce_sum {
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 0.05rem 0;
  }
  #goods-list li .price {
    font-size: 0.12rem;
    color: #f1635b;
    text-align: left;
    float: left;
    margin-top: 0.05rem;
  }
  .goods_list li .pce_sum span {
    text-align: left;
    font-size: 0.1rem;
    padding-left: 0!important;
  }
  .price1 {
    font-size: 0.12rem;
    color: #808080;
    text-align: left;
    float: right;
    margin-top: 0.06rem;
    padding-right: 0.05rem;
  }
  .good_img {
    text-align: center;
    width: 100%;
    overflow: hidden;
  }
</style>
